<template>
  <base-modal
    :title="initData.pageType === 'edit' ? ' 机械设备类型编辑': ' 机械设备类型添加'"
    cancelText="取消"
    okText="保存"
    :width="600"
    v-on="$listeners"
    @ok="handleOk"
    :confirmLoading="loading.isSaving"
  >
    <div class="about-master-container">
      <a-form-model ref="form" :model="formInfo" :rules="rules">
        <a-row>
          <a-col span="24">
            <a-form-model-item label="设备类型" prop="name">
              <BaseInput placeholder="请输入" v-model.trim="formInfo.name" />
            </a-form-model-item>
          </a-col>
          <a-col span="24">
            <a-form-model-item label="设备分类" prop="code">
              <BSelect v-model="formInfo.code" placeholder="请输入" :list="[
                {id:'0',name:'一类'},
                {id:'1',name:'二类'},
                {id:'2',name:'三类'},
              ]"
              />
            </a-form-model-item>
          </a-col>
          <a-col span="24">
            <a-form-model-item label="状态">
              <a-select placeholder="请选择状态" v-model="formInfo.enabled">
                <a-select-option :value="1">可用</a-select-option>
                <a-select-option :value="0">不可用</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </base-modal>
</template>

<script>
import {
  addSelectListByType,
  updateSelectListByType,
  getSelectListByTypeDetail
} from '@/api/safetySupervision/common.js'
import BaseModal from '@/components/BaseModal'

export default {
  name: 'a' + Date.now(),
  components: {
    BaseModal
  },
  props: {
    initData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      loading: {
        isSaving: false
      },
      formInfo: {
        name: '',
        enabled: 1,
        code: ''
      },
      rules: {
        name: [{ required: true, message: '请输入设备类型', trigger: 'change' }],
        code: [{ required: true, message: '请选择设备分类', trigger: 'change' }],
        enabled: [{ required: true, message: '请选择状态', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    validateForm() {
      let flag = false
      this.$refs.form.validate((valid) => {
        flag = valid
      })
      return flag
    },
    async getDetail() {
      const { id } = this.initData
      if (!id) return
      const params = {
        id
      }
      const [err, res] = await getSelectListByTypeDetail(params)
      if (!err) {
        this.formInfo = {
          ...this.formInfo,
          ...res.data,
          enabled: Number(res.data.enabled)
        }
      }
    },
    async handleOk() {
      if (!this.validateForm()) return
      if (this.loading.isSaving) return
      this.loading.isSaving = true
      const { id, name, enabled } = this.formInfo
      const params = {
        ...this.formInfo,
        type: 13
      }
      const { pageType } = this.initData
      const fn = pageType === 'edit' ? updateSelectListByType : addSelectListByType
      const [err, res] = await fn(params)
      if (!err) {
        this.$message.success('成功')
        this.$emit('confirm')
      }
      this.loading.isSaving = false
    }
  }
}
</script>

<style lang="less" scoped>
form .ant-mentions,
form textarea.ant-input {
  height: auto !important;
  width: 100%;
}
</style>